<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: blue;
        }
        .page-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .scroll-content {
            width: 100px;
            height: 210px;
            padding: 5px;
            overflow: auto;
            background-color: #eee;
        }
        img {
            display: block;
            width: 50px;
            height: 50px;
            margin: 0 auto 10px;
        }
    </style>
</head>
<body>
<div class="page-container">
    <div class="scroll-content">
        <div class="list">
            <img src="./images/default-picture.png" data-src="image1.jpg" alt="Image 1">
            <img src="./images/default-picture.png" data-src="image2.jpg" alt="Image 2">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 3">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 4">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 5">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 6">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 7">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 8">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 9">
            <img src="./images/default-picture.png" data-src="image3.jpg" alt="Image 10">
        </div>
    </div>
</div>
<script>
    const scrollContent = document.querySelector('.scroll-content');
    const imgList = document.querySelectorAll('img');
    const imgObserver = new IntersectionObserver((entries) => {
        console.log(entries);
        entries.forEach(entry => { // 懒加载图片
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                imgObserver.unobserve(img);
            }
        })
    }, {
        root: scrollContent,
        rootMargin: "0px",
        threshold: 0.5
    });
    imgList.forEach(img => imgObserver.observe(img));
</script>
</body>
</html>
